<template>
  <div class="permission-management-container">
    <!-- 搜索和操作区域 -->
    <div class="search-section">
      <div class="search-row">
        <div class="search-item">
          <label>权限名称:</label>
          <el-input v-model="searchForm.permissionName" placeholder="请输入权限名称" clearable @keyup.enter="handleSearch" />
        </div>
        <div class="search-item">
          <label>权限类型:</label>
          <el-select v-model="searchForm.permissionType" placeholder="请选择权限类型" clearable style="width: 200px;">
            <el-option label="菜单" value="menu" />
            <el-option label="按钮" value="button" />
            <el-option label="接口" value="api" />
          </el-select>
        </div>
        <div class="search-item">
          <label>上级权限:</label>
          <el-select v-model="searchForm.parentId" placeholder="请选择上级权限" clearable style="width: 200px;">
            <el-option v-for="permission in permissionOptions" :key="permission.id" :label="permission.permissionName"
              :value="permission.id" />
          </el-select>
        </div>
        <div class="search-actions">
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </div>
      </div>
      <div class="action-row">
        <div class="right-actions">
          <el-button type="primary" @click="handleAdd">
            <el-icon>
              <Plus />
            </el-icon>
            新增权限
          </el-button>
        </div>
      </div>
    </div>

    <!-- 权限列表 -->
    <div class="main-content">
      <div class="table-container">
        <el-table :data="permissionList" v-loading="tableLoading" border stripe style="width: 100%" row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :default-expand-all="false">

          <el-table-column prop="permissionName" label="权限名称" width="200" />

          <el-table-column prop="permissionType" label="权限类型" width="100">
            <template #default="scope">
              <el-tag :type="getTypeTagType(scope.row.permissionType)">
                {{ getTypeText(scope.row.permissionType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="parentId" label="上级权限" width="150" />
          <el-table-column prop="level" label="层级" width="80">
            <template #default="scope">
              <el-tag type="info">{{ scope.row.level }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sortOrder" label="排序" width="80" />
          <el-table-column prop="permissionPath" label="路径/URL" min-width="200" />
          <el-table-column prop="status" label="状态" width="80">
            <template #default="scope">
              <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                {{ scope.row.status === 1 ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="创建时间" width="160">
            <template #default="scope">
              {{ moment(scope.row.addTime).format("yyyy-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="small" :type="scope.row.status === 1 ? 'danger' : 'success'"
                @click="handleToggleStatus(scope.row)">
                {{ scope.row.status === 1 ? '禁用' : '启用' }}
              </el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>

    <!-- 新增/编辑权限对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px" @close="resetForm">
      <el-form ref="permissionFormRef" :model="permissionForm" :rules="permissionFormRules" label-width="100px">
        <el-form-item label="权限名称" prop="permissionName">
          <el-input v-model="permissionForm.permissionName" placeholder="请输入权限名称" />
        </el-form-item>
        <el-form-item label="权限编码" prop="permissionCode">
          <el-input v-model="permissionForm.permissionCode" placeholder="请输入权限编码" />
        </el-form-item>
        <el-form-item label="权限类型" prop="permissionType">
          <el-select v-model="permissionForm.permissionType" placeholder="请选择权限类型" style="width: 100%">
            <el-option label="菜单" value="menu" />
            <el-option label="按钮" value="button" />
            <el-option label="接口" value="api" />
          </el-select>
        </el-form-item>
        <el-form-item label="上级权限" prop="parentId">
          <el-tree-select v-model="permissionForm.parentId" :data="permissionTreeOptions" :props="treeSelectProps"
            placeholder="请选择上级权限" clearable check-strictly style="width: 100%" />
        </el-form-item>
        <el-form-item label="路径/URL" prop="permissionPath">
          <el-input v-model="permissionForm.permissionPath" placeholder="请输入路径或URL" />
        </el-form-item>

        <el-form-item label="排序" prop="sortOrder">
          <el-input-number v-model="permissionForm.sortOrder" :min="0" :max="9999" placeholder="请输入排序号"
            style="width: 100%" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="permissionForm.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="permissionForm.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import moment from 'moment'
import * as pressmionApi from '../../api/permission'

// ==================== 接口定义 ====================
/**
 * 权限信息接口
 * 定义权限的基本信息结构
 */
interface Permission {
  id: number
  permissionName: string
  permissionCode: string
  permissionType: string
  parentId: number | null
  parentName?: string
  level: number
  sortOrder: number
  permissionPath: string
  icon?: string
  status: number
  remark?: string
  addTime: string
  children?: Permission[]
  hasChildren?: boolean
}

/**
 * 搜索表单接口
 * 定义权限搜索的条件
 */
interface SearchForm {
  permissionName: string
  permissionType: string
  parentId: number | null
}

/**
 * 权限表单接口
 * 定义新增/编辑权限时的表单数据
 */
interface PermissionForm {
  id?: number
  permissionName: string
  permissionCode: string
  permissionType: string
  parentId: number | null
  level: number
  sortOrder: number
  permissionPath: string
  icon: string
  status: number
  remark: string
  addProp: string
}

/**
 * 分页信息接口
 * 定义分页相关的参数
 */
interface Pagination {
  currentPage: number
  pageSize: number
  total: number
}

// ==================== 响应式数据 ====================
// 权限列表数据
const permissionList = ref<Permission[]>([])
// 权限选项数据（用于搜索下拉）
const permissionOptions = ref<Permission[]>([])
// 表格加载状态
const tableLoading = ref(false)
// 对话框显示状态
const dialogVisible = ref(false)
// 对话框标题
const dialogTitle = ref('')

// 搜索表单
const searchForm = reactive<SearchForm>({
  permissionName: '',
  permissionType: '',
  parentId: null
})

// 权限表单
const permissionForm = reactive<PermissionForm>({
  permissionName: '',
  permissionCode: '',
  permissionType: 'menu',

  parentId: null,
  level: 0,
  sortOrder: 0,
  permissionPath: '',
  icon: 'null',
  status: 1,
  remark: '',
  addProp: localStorage.getItem("userNickname") || ''
})

// 分页信息
const pagination = reactive<Pagination>({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 表单引用
const permissionFormRef = ref<FormInstance>()

// 树形选择器属性
const treeSelectProps = {
  children: 'children',
  label: 'permissionName',
  value: 'id'
}

// ==================== 计算属性 ====================
/**
 * 权限树形选项
 * 用于树形选择器，排除当前编辑的权限及其子权限
 */
const permissionTreeOptions = computed(() => {
  if (!permissionForm.id) {
    return permissionOptions.value
  }

  // 过滤掉当前权限及其子权限
  const filterPermission = (permissions: Permission[], excludeId: number): Permission[] => {
    return permissions.filter(permission => {
      if (permission.id === excludeId) return false
      if (permission.children) {
        permission.children = filterPermission(permission.children, excludeId)
      }
      return true
    })
  }

  return filterPermission(permissionOptions.value, permissionForm.id)
})

// ==================== 工具方法 ====================
/**
 * 获取权限类型标签类型
 * 根据权限类型返回对应的标签颜色
 */
const getTypeTagType = (type: string) => {
  switch (type) {
    case 'menu': return 'primary'
    case 'button': return 'success'
    case 'api': return 'warning'
    default: return 'info'
  }
}

/**
 * 获取权限类型文本
 * 将权限类型代码转换为中文显示
 */
const getTypeText = (type: string) => {
  switch (type) {
    case 'menu': return '菜单'
    case 'button': return '按钮'
    case 'api': return '接口'
    default: return type
  }
}

// ==================== 表单验证规则 ====================
/**
 * 权限表单验证规则
 * 定义各个字段的验证条件
 */
const permissionFormRules: FormRules = {
  permissionName: [
    { required: true, message: '请输入权限名称', trigger: 'blur' },
    { min: 2, max: 50, message: '权限名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  permissionCode: [
    { required: true, message: '请输入权限编码', trigger: 'blur' },
    { pattern: /^[A-Z0-9_]+$/, message: '权限编码只能包含大写字母、数字和下划线', trigger: 'blur' }
  ],
  permissionType: [
    { required: true, message: '请选择权限类型', trigger: 'change' }
  ],
  sortOrder: [
    { required: true, message: '请输入排序号', trigger: 'blur' }
  ]
}

// ==================== 生命周期钩子 ====================
/**
 * 组件挂载时初始化数据
 * 加载权限列表
 */
onMounted(() => {
  loadPermissionList()
  loadPermissionOptions()
})

// ==================== 数据加载方法 ====================
/**
 * 加载权限列表
 * 根据搜索条件和分页参数获取权限数据
 */
const loadPermissionList = async () => {
  try {
    tableLoading.value = true

    const response = await pressmionApi.getPermissionList({
      ...searchForm,
      page: pagination.currentPage,
      size: pagination.pageSize
    })
    permissionList.value = response.data.data.list
    pagination.total = response.data.data.count
    // 模拟数据
    // const mockData = {
    //   data: [
    //     {
    //       id: 1,
    //       name: '系统管理',
    //       code: 'SYSTEM_MANAGE',
    //       type: 'menu',
    //       parentId: null,
    //       parentName: '',
    //       level: 1,
    //       sortOrder: 1,
    //       path: '/system',
    //       icon: 'Setting',
    //       status: 1,
    //       remark: '系统管理模块',
    //       createTime: '2024-01-01 10:00:00',
    //       children: [
    //         {
    //           id: 11,
    //           name: '用户管理',
    //           code: 'USER_MANAGE',
    //           type: 'menu',
    //           parentId: 1,
    //           parentName: '系统管理',
    //           level: 2,
    //           sortOrder: 1,
    //           path: '/system/user',
    //           icon: 'User',
    //           status: 1,
    //           remark: '用户管理页面',
    //           createTime: '2024-01-02 10:00:00',
    //           children: [
    //             {
    //               id: 111,
    //               name: '查看用户',
    //               code: 'USER_VIEW',
    //               type: 'button',
    //               parentId: 11,
    //               parentName: '用户管理',
    //               level: 3,
    //               sortOrder: 1,
    //               path: '',
    //               icon: '',
    //               status: 1,
    //               remark: '查看用户列表',
    //               createTime: '2024-01-03 10:00:00'
    //             },
    //             {
    //               id: 112,
    //               name: '新增用户',
    //               code: 'USER_ADD',
    //               type: 'button',
    //               parentId: 11,
    //               parentName: '用户管理',
    //               level: 3,
    //               sortOrder: 2,
    //               path: '',
    //               icon: '',
    //               status: 1,
    //               remark: '新增用户',
    //               createTime: '2024-01-04 10:00:00'
    //             },
    //             {
    //               id: 113,
    //               name: '编辑用户',
    //               code: 'USER_EDIT',
    //               type: 'button',
    //               parentId: 11,
    //               parentName: '用户管理',
    //               level: 3,
    //               sortOrder: 3,
    //               path: '',
    //               icon: '',
    //               status: 1,
    //               remark: '编辑用户信息',
    //               createTime: '2024-01-05 10:00:00'
    //             },
    //             {
    //               id: 114,
    //               name: '删除用户',
    //               code: 'USER_DELETE',
    //               type: 'button',
    //               parentId: 11,
    //               parentName: '用户管理',
    //               level: 3,
    //               sortOrder: 4,
    //               path: '',
    //               icon: '',
    //               status: 1,
    //               remark: '删除用户',
    //               createTime: '2024-01-06 10:00:00'
    //             }
    //           ]
    //         },
    //         {
    //           id: 12,
    //           name: '角色管理',
    //           code: 'ROLE_MANAGE',
    //           type: 'menu',
    //           parentId: 1,
    //           parentName: '系统管理',
    //           level: 2,
    //           sortOrder: 2,
    //           path: '/system/role',
    //           icon: 'UserFilled',
    //           status: 1,
    //           remark: '角色管理页面',
    //           createTime: '2024-01-07 10:00:00'
    //         },
    //         {
    //           id: 13,
    //           name: '部门管理',
    //           code: 'DEPT_MANAGE',
    //           type: 'menu',
    //           parentId: 1,
    //           parentName: '系统管理',
    //           level: 2,
    //           sortOrder: 3,
    //           path: '/system/department',
    //           icon: 'OfficeBuilding',
    //           status: 1,
    //           remark: '部门管理页面',
    //           createTime: '2024-01-08 10:00:00'
    //         }
    //       ]
    //     },
    //     {
    //       id: 2,
    //       name: '生产管理',
    //       code: 'PRODUCTION_MANAGE',
    //       type: 'menu',
    //       parentId: null,
    //       parentName: '',
    //       level: 1,
    //       sortOrder: 2,
    //       path: '/production',
    //       icon: 'Operation',
    //       status: 1,
    //       remark: '生产管理模块',
    //       createTime: '2024-01-09 10:00:00',
    //       children: [
    //         {
    //           id: 21,
    //           name: 'BOM管理',
    //           code: 'BOM_MANAGE',
    //           type: 'menu',
    //           parentId: 2,
    //           parentName: '生产管理',
    //           level: 2,
    //           sortOrder: 1,
    //           path: '/production/bom',
    //           icon: 'Document',
    //           status: 1,
    //           remark: 'BOM管理页面',
    //           createTime: '2024-01-10 10:00:00'
    //         }
    //       ]
    //     }
    //   ],
    //   total: 10
    // }


  } catch (error) {
    ElMessage.error('加载权限列表失败')
    console.error('加载权限列表失败:', error)
  } finally {
    tableLoading.value = false
  }
}

/**
 * 加载权限选项
 * 获取所有权限信息用于下拉选择和树形选择
 */
const loadPermissionOptions = async () => {
  try {
    const response = await pressmionApi.getPermissionTree()
    const rawData = response.data.data || []

    // 递归处理权限数据，确保字段名统一
    const processPermissionData = (items: any[]): any[] => {
      return items.map((item: any) => {
        const processedItem: {
          id: any;
          permissionName: any;
          permissionCode: any;
          permissionType: any;
          parentId: any;
          level: any;
          sortOrder: any;
          permissionPath: any;
          icon: any;
          status: any;
          remark: any;
          addTime: any;
          children: any[];
        } = {
          id: item.Id || item.id,
          permissionName: item.PermissionName || item.permissionName,
          permissionCode: item.PermissionCode || item.permissionCode,
          permissionType: item.PermissionType || item.permissionType,
          parentId: item.ParentId || item.parentId,
          level: item.Level || item.level,
          sortOrder: item.SortOrder || item.sortOrder,
          permissionPath: item.PermissionPath || item.permissionPath,
          icon: item.Icon || item.icon,
          status: item.Status || item.status,
          remark: item.Remark || item.remark,
          addTime: item.AddTime || item.addTime,
          children: []
        }

        // 递归处理子权限
        const children = item.Children || item.children || []
        if (children && children.length > 0) {
          processedItem.children = processPermissionData(children)
        }

        return processedItem
      })
    }

    permissionOptions.value = processPermissionData(rawData)
    console.log('权限选项数据:', permissionOptions.value)
    // 模拟数据
    // permissionOptions.value = [
    //   {
    //     id: 1,
    //     name: '系统管理',
    //     code: 'SYSTEM_MANAGE',
    //     type: 'menu',
    //     parentId: null,
    //     level: 1,
    //     sortOrder: 1,
    //     path: '/system',
    //     icon: 'Setting',
    //     status: 1,
    //     createTime: '2024-01-01 10:00:00',
    //     children: [
    //       {
    //         id: 11,
    //         name: '用户管理',
    //         code: 'USER_MANAGE',
    //         type: 'menu',
    //         parentId: 1,
    //         level: 2,
    //         sortOrder: 1,
    //         path: '/system/user',
    //         icon: 'User',
    //         status: 1,
    //         createTime: '2024-01-02 10:00:00'
    //       },
    //       {
    //         id: 12,
    //         name: '角色管理',
    //         code: 'ROLE_MANAGE',
    //         type: 'menu',
    //         parentId: 1,
    //         level: 2,
    //         sortOrder: 2,
    //         path: '/system/role',
    //         icon: 'UserFilled',
    //         status: 1,
    //         createTime: '2024-01-07 10:00:00'
    //       }
    //     ]
    //   },
    //   {
    //     id: 2,
    //     name: '生产管理',
    //     code: 'PRODUCTION_MANAGE',
    //     type: 'menu',
    //     parentId: null,
    //     level: 1,
    //     sortOrder: 2,
    //     path: '/production',
    //     icon: 'Operation',
    //     status: 1,
    //     createTime: '2024-01-09 10:00:00'
    //   }
    // ]
  } catch (error) {
    ElMessage.error('加载权限选项失败')
    console.error('加载权限选项失败:', error)
  }
}

// ==================== 搜索和操作方法 ====================
/**
 * 执行搜索
 * 重置分页并重新加载数据
 */
const handleSearch = () => {
  // pagination.currentPage = 1
  loadPermissionList()
}

/**
 * 重置搜索条件
 * 清空搜索表单并重新加载数据
 */
const resetSearch = () => {
  searchForm.permissionName = ''
  searchForm.permissionType = ''
  searchForm.parentId = null
  pagination.currentPage = 1
  loadPermissionList()
}

/**
 * 刷新数据
 * 重新加载当前页面的数据
 */
const refreshData = () => {
  loadPermissionList()
}

/**
 * 分页大小改变
 * 当用户改变每页显示数量时触发
 */
const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.currentPage = 1
  loadPermissionList()
}

/**
 * 当前页改变
 * 当用户切换页码时触发
 */
const handleCurrentChange = (page: number) => {
  pagination.currentPage = page
  loadPermissionList()
}

// ==================== 权限操作方法 ====================
/**
 * 新增权限
 * 打开新增权限对话框
 */
const handleAdd = () => {
  dialogTitle.value = '新增权限'
  resetForm()
  dialogVisible.value = true
}

/**
 * 编辑权限
 * 打开编辑权限对话框并填充数据
 */
const handleEdit = (permission: Permission) => {
  dialogTitle.value = '编辑权限'
  Object.assign(permissionForm, {
    id: permission.id,
    permissionName: permission.permissionName,
    permissionCode: permission.permissionCode,
    permissionType: permission.permissionType,
    parentId: permission.parentId,
    level: permission.level,
    sortOrder: permission.sortOrder,
    permissionPath: permission.permissionPath,
    icon: permission.icon || '',
    status: permission.status,
    remark: permission.remark || '',
    addProp: localStorage.getItem("userNickname") || ''
  })
  dialogVisible.value = true
}

/**
 * 切换权限状态
 * 启用或禁用权限
 */
const handleToggleStatus = async (permission: Permission) => {
  const action = permission.status === 1 ? '禁用' : '启用'
  try {
    await ElMessageBox.confirm(
      `确定要${action}权限 "${permission.permissionName}" 吗？`,
      '确认操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    await pressmionApi.togglePermissionStatus(permission.id, permission.status === 1 ? 0 : 1)

    ElMessage.success(`${action}权限成功`)
    loadPermissionList()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(`${action}权限失败`)
      console.error(`${action}权限失败:`, error)
    }
  }
}

/**
 * 删除权限
 * 删除指定权限
 */
const handleDelete = async (permission: Permission) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除权限 "${permission.permissionName}" 吗？此操作不可恢复！`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    await pressmionApi.deletePermission(permission.id)

    ElMessage.success('删除权限成功')
    loadPermissionList()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除权限失败')
      console.error('删除权限失败:', error)
    }
  }
}

/**
 * 导出权限数据
 * 导出权限列表为Excel文件
 */
const handleExport = () => {
  ElMessage.info('导出功能开发中...')
  // TODO: 实现导出功能
}

// ==================== 表单处理方法 ====================
/**
 * 重置表单
 * 清空表单数据
 */
const resetForm = () => {
  Object.assign(permissionForm, {
    id: undefined,
    permissionName: '',
    permissionCode: '',
    permissionType: 'menu',
    parentId: null,
    level: 0,
    sortOrder: 0,
    permissionPath: '',
    icon: '',
    status: 1,
    remark: '',
    addProp: localStorage.getItem("userNickname") || ''
  })
  permissionFormRef.value?.clearValidate()
}

/**
 * 提交表单
 * 验证表单并提交数据
 */
const submitForm = async () => {
  if (!permissionFormRef.value) return

  try {
    await permissionFormRef.value.validate()

    if (permissionForm.id) {
      await pressmionApi.updatePermission(permissionForm)
    } else {
      await pressmionApi.createPermission(permissionForm)
    }

    ElMessage.success(permissionForm.id ? '更新权限成功' : '创建权限成功')
    dialogVisible.value = false
    loadPermissionList()
    loadPermissionOptions() // 重新加载选项数据
  } catch (error) {
    ElMessage.error('保存权限失败')
    console.error('保存权限失败:', error)
  }
}
</script>

<style scoped>
.permission-management-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 24px;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.search-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.search-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-item label {
  white-space: nowrap;
  font-weight: 500;
}

.search-actions {
  margin-left: auto;
}

.action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.refresh-icon {
  cursor: pointer;
  font-size: 18px;
  color: #666;
  transition: color 0.3s;
}

.refresh-icon:hover {
  color: #409eff;
}

.main-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-container {
  padding: 20px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.dialog-footer {
  text-align: right;
}
</style>
